<template>
    <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- 页面头部 -->
            <div class="mb-8">
                <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                    <div>
                        <h1 class="text-4xl font-bold text-gray-900 mb-2">我的题目</h1>
                        <p class="text-lg text-gray-600">管理和查看您提交的题目</p>
                    </div>
                    <button
                        class="group flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl font-semibold hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5"
                        @click="handleNewTopic">
                        <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-90" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        新增题目
                    </button>
                </div>
            </div>

            <!-- 搜索和筛选区域 -->
            <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/50 p-6 mb-8">
                <div class="flex flex-col lg:flex-row gap-4">
                    <div class="flex-1">
                        <div class="relative">
                            <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <circle cx="11" cy="11" r="8" />
                                <path d="m21 21-4.35-4.35" />
                            </svg>
                            <input v-model="search" type="text" placeholder="搜索题目标题..."
                                class="w-full pl-11 pr-4 py-3 border border-gray-200 rounded-xl text-base bg-white/50 backdrop-blur-sm transition-all duration-300 focus:outline-none focus:border-indigo-500 focus:bg-white focus:shadow-lg placeholder-gray-400" />
                        </div>
                    </div>

                    <div class="flex flex-wrap gap-3">
                        <!-- <a-select v-model="domain" class="px-4 py-3">
                            <a-option v-for="item in DomainsENUM" :key="item.value" :value="item.value">
                                {{ item.label }}
                            </a-option>
                        </a-select>

                        <select v-model="difficulty" class="px-4 py-3">
                            <option value="">选择难度</option>
                            <option v-for="item in difficultiesENUM" :key="item.value" :value="item.value">
                                {{ item.label }}
                            </option>
                        </select>

                        <select v-model="reviewStatus" class="px-4 py-3">
                            <option value="">审核状态</option>
                            <option v-for="item in ReviewStatusENUM" :key="item.value" :value="item.value">
                                {{ item.label }}
                            </option>
                        </select> -->

                        <button
                            class="group flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-xl font-semibold hover:from-blue-600 hover:to-indigo-600 transition-all duration-300 shadow-lg hover:shadow-xl"
                            @click="_search">
                            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-12"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            搜索
                        </button>
                    </div>
                </div>
            </div>

            <!-- 题目列表 -->
            <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/50 overflow-hidden">
                <!-- 加载状态 -->
                <div v-if="loading" class="flex items-center justify-center py-16">
                    <div class="flex flex-col items-center">
                        <div class="relative mb-4">
                            <div
                                class="w-12 h-12 border-4 border-gray-200 border-t-indigo-500 rounded-full animate-spin" />
                            <div class="absolute inset-0 w-12 h-12 border-4 border-transparent border-r-purple-400 rounded-full animate-spin animate-reverse"
                                style="animation-delay: 0.5s;" />
                        </div>
                        <p class="text-lg font-medium text-gray-700">加载题目中...</p>
                    </div>
                </div>

                <!-- 题目表格 -->
                <div v-else class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gradient-to-r from-gray-50 to-blue-50 border-b border-gray-200">
                            <tr>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">题目标题</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">领域</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">难度</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">审核状态</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">提交时间</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr v-for="topic in topics" :key="topic.id"
                                class="hover:bg-gray-50/80 transition-colors duration-200 cursor-pointer"
                                @click="navigateToTopic(topic.id)">
                                <td class="px-6 py-4">
                                    <div class="max-w-md">
                                        <div class="font-medium text-gray-900 line-clamp-2">{{ topic.title }}</div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span
                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                        {{ topic.domain }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <span :class="getDifficultyClass(topic.difficulty)">
                                        {{ topic.difficulty }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <span :class="getStatusClass(topic.reviewStatus)">
                                        {{ getStatusText(topic.reviewStatus) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">
                                    {{ new Date(topic.createdAt).toLocaleDateString() }}
                                </td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 空状态 -->
                    <div v-if="topics.length === 0" class="text-center py-16">
                        <div
                            class="w-24 h-24 bg-gradient-to-br from-gray-100 to-gray-200 rounded-full flex items-center justify-center mx-auto mb-6">
                            <svg class="w-12 h-12 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">暂无题目</h3>
                        <p class="text-gray-600 mb-6">您还没有提交任何题目，点击上方按钮创建第一个题目吧！</p>
                        <button
                            class="group flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl font-semibold hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5 mx-auto"
                            @click="handleNewTopic">
                            <svg class="w-5 h-5 transition-transform duration-300 group-hover:rotate-90"
                                viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 4v16m8-8H4" />
                            </svg>
                            创建题目
                        </button>
                    </div>
                </div>

                <!-- 分页 -->
                <div v-if="topics.length > 0" class="bg-gray-50/80 px-6 py-4 border-t border-gray-200">
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-700">
                            显示第 {{ (pagination.current - 1) * pagination.pageSize + 1 }} - {{
                                Math.min(pagination.current * pagination.pageSize, pagination.total) }} 条，共 {{
                            pagination.total }} 条
                        </div>
                        <div class="flex items-center gap-2">
                            <button
                                class="px-3 py-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-100 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                :disabled="pagination.current <= 1" @click="changePage(pagination.current - 1)">
                                上一页
                            </button>
                            <span class="px-3 py-2 text-sm text-gray-700">
                                第 {{ pagination.current }} 页 / 共 {{ Math.ceil(pagination.total / pagination.pageSize) }}
                                页
                            </span>
                            <button
                                class="px-3 py-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-100 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                :disabled="pagination.current >= Math.ceil(pagination.total / pagination.pageSize)"
                                @click="changePage(pagination.current + 1)">
                                下一页
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script lang="ts" setup>
import { useTopics } from '../composables/useTopics';
import type { Topic } from '~/types/topic.d.ts';
import { ReviewStatus } from '~/types/topic.d.ts';
import ReviewStatusChart from '~/components/ReviewStatusChart.vue';
const router = useRouter()

const { topics, fetchTopics, difficultiesENUM, DomainsENUM, ReviewStatusENUM, pagination, changePage, changePageSize, loading } = useTopics()


const columns = [
    {
        title: '提交的题目',
        dataIndex: 'title',
        key: 'title',
        width: 500,
    },
    {
        title: '领域',
        dataIndex: 'domain',
        key: 'domain',
    },
    {
        title: '难度',
        dataIndex: 'difficulty',
        key: 'difficulty',
    },
    {
        title: '审核状态',
        dataIndex: 'reviewStatus',
        key: 'reviewStatus',
    },
];

const pageConf = computed(() => {
    return {
        current: pagination.value.current,
        pageSize: pagination.value.pageSize,
        total: pagination.value.total,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total: number, range: [number, number]) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`,
        pageSizeOptions: ['10', '20', '50', '100']
    }
})

const getStatusClass = (status: ReviewStatus) => {
    switch (status) {
        case ReviewStatus.PENDING:
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-100 text-orange-800';
        case ReviewStatus.APPROVED:
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
        case ReviewStatus.REJECTED:
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800';
        default:
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800';
    }
};

const getStatusText = (status: ReviewStatus) => {
    switch (status) {
        case ReviewStatus.PENDING:
            return '待审核';
        case ReviewStatus.APPROVED:
            return '已通过';
        case ReviewStatus.REJECTED:
            return '已拒绝';
        default:
            return '未知';
    }
};

const getDifficultyClass = (difficulty: string) => {
    switch (difficulty) {
        case '基础':
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
        case '中等':
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800';
        case '困难':
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800';
        default:
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800';
    }
};

const navigateToTopic = (topicId: number) => {
    router.push(`/StudyArea/Topics/TopicDetail/${topicId}`)
}

const _handleEdit = (row: Topic) => {
    console.log(row)
}

const search = ref('')
const difficulty = ref()
const domain = ref()
const reviewStatus = ref()

const _search = () => {
    // 重置到第一页
    pagination.value.current = 1
    const params: Record<string, string> = {}
    params.search = search.value
    params.difficulty = difficulty.value
    params.domain = domain.value
    params.reviewStatus = reviewStatus.value
    params.page = '1' // 搜索时重置到第一页
    fetchTopics(params)
    console.log('=== 搜索请求已发送 ===')
}

// 处理表格分页变化
const handleTableChange = (pag: { current?: number; pageSize?: number }, _filters: unknown, _sorter: unknown) => {
    const current = pag.current || 1
    const pageSize = pag.pageSize || 10
    if (pageSize !== pagination.value.pageSize) {
        // 页面大小改变
        changePageSize(current, pageSize)
    } else {
        // 页码改变
        changePage(current, pageSize)
    }
}

// 新增题目
const handleNewTopic = () => {
    navigateTo('/StudyArea/Topics/TopicDetail/new')
}

const customRow = (record: Topic) => {
    return {
        style: {
            cursor: 'pointer',
        },
        onClick: () => {
            router.push(`/StudyArea/Topics/TopicDetail/${record.id}`)
        }
    }
}
onMounted(() => {
    fetchTopics()
})
</script>